<template>
	<div class="carBuyCommon">
		<div class="title">个人信息</div>
		<div>
			<el-row class="info-row" v-show="isEdit == true">
				<el-col :span="3" class="subTitle">
					姓名
				</el-col>
				<el-col :span="5">
					<el-input class="info-input" v-model="personalInfo.name" :disabled="disabled"></el-input>
				</el-col>
				<el-col :span="3" class="subTitle">
					身份证地址
				</el-col>
				<el-col :span="13">
					<el-input class="info-input" v-model="personalInfo.identityAddress"></el-input>
				</el-col>
			</el-row>
			<el-row class="info-row" v-show="isEdit == false">
				<el-col :span="8" class="info-label">
					姓名：
					<label class="text">{{personalInfo.name}}</label>
				</el-col>
				<el-col :span="13" class="info-label">
					身份证地址：
					<label class="text">{{personalInfo.identityAddress}}</label>
				</el-col>
			</el-row>
			<el-row class="info-row" v-show="isEdit == true">
				<el-col :span="3" class="subTitle">
					身份证号
				</el-col>
				<el-col :span="5">
					<el-input class="info-input" v-model="personalInfo.identityCode" :disabled="disabled"></el-input>
				</el-col>
				<el-col :span="3" class="subTitle">
					身份证归属地
				</el-col>
				<el-col :span="5">
					<el-input class="info-input" v-model="personalInfo.identityCounty" :disabled="disabled"></el-input>
				</el-col>
				<el-col :span="3" class="subTitle">
					出生日期
				</el-col>
				<el-col :span="5">
					<el-input class="info-input" v-model="personalInfo.age" :disabled="disabled"></el-input>
				</el-col>
			</el-row>
			<el-row class="info-row" v-show="isEdit == false">
				<el-col :span="8" class="info-label">
					身份证号：
					<label class="text">{{personalInfo.identityCode}}</label>
				</el-col>
				<el-col :span="8" class="info-label">
					身份证归属地：
					<label class="text">{{personalInfo.identityCounty}}</label>
				</el-col>
				<el-col :span="8" class="info-label">
					出生日期：
					<label class="text">{{personalInfo.age}}</label>
				</el-col>
			</el-row>
			<el-row class="info-row" v-show="isEdit == true">
				<el-col :span="3" class="subTitle">
					性别
				</el-col>
				<el-col :span="5">
					<el-select class="info-select" :disabled="disabled" v-model="personalInfo.sex" placeholder="请选择">
						<el-option v-for="item in $store.state.sex" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-col>
				<el-col :span="3" class="subTitle">
					学历
				</el-col>
				<el-col :span="5">
					<el-select class="info-select" v-model="personalInfo.education" placeholder="请选择">
						<el-option v-for="item in $store.state.education" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-col>
				<el-col :span="3" class="subTitle">
					户籍
				</el-col>
				<el-col :span="5">
					<el-input class="info-input" v-model="personalInfo.residence"></el-input>
				</el-col>
			</el-row>
			<el-row class="info-row" v-show="isEdit == false">
				<el-col :span="8" class="info-label">
					性别：
					<label class="text">{{personalInfo.sex_name}}</label>
				</el-col>
				<el-col :span="8" class="info-label">
					学历：
					<label class="text">{{personalInfo.education_name}}</label>
				</el-col>
				<el-col :span="8" class="info-label">
					户籍：
					<label class="text">{{personalInfo.residence}}</label>
				</el-col>
			</el-row>
			<el-row class="info-row" v-show="isEdit == true">
				<el-col :span="3" class="subTitle">
					手机号码
				</el-col>
				<el-col :span="5">
					<el-input class="info-input" :maxlength='11' v-model="personalInfo.phone"></el-input>
				</el-col>
				<el-col :span="3" class="subTitle">
					手机归属地
				</el-col>
				<el-col :span="5">
					<el-input class="info-input" v-model="personalInfo.phoneAddress" :disabled="disabled"></el-input>
				</el-col>
				<el-col :span="3" class="subTitle">
					婚姻状态
				</el-col>
				<el-col :span="5">
					<el-select class="info-select" v-model="personalInfo.marry" placeholder="请选择" :disabled="disabled">
						<el-option v-for="item in $store.state.marryStatus" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-col>
			</el-row>
			<el-row class="info-row" v-show="isEdit == false">
				<el-col :span="8" class="info-label">
					手机号码：
					<label class="text">{{personalInfo.phone}}</label>
				</el-col>
				<el-col :span="8" class="info-label">
					手机归属地：
					<label class="text">{{personalInfo.phoneAddress}}</label>
				</el-col>
				<el-col :span="8" class="info-label">
					婚姻状态：
					<label class="text">{{personalInfo.marry_name}}</label>
				</el-col>
			</el-row>
			<el-row class="info-row" v-show="isEdit == true">
				<el-col :span="3" class="subTitle">
					现住地址
				</el-col>
				<el-col :span="13">
					<el-input class="info-input" v-model="personalInfo.address"></el-input>
				</el-col>
			</el-row>
			<el-row class="info-row" v-show="isEdit == false">
				<el-col :span="13" class="info-label">
					现住地址：
					<label class="text">{{personalInfo.address}}</label>
				</el-col>
			</el-row>
		</div>
		<div class="title">单位信息</div>
		<div>
			<el-row class="info-row" v-show="isEdit == true">
				<el-col :span="3" class="subTitle">
					单位名称
				</el-col>
				<el-col :span="5">
					<el-input class="info-input" v-model="unitInfo.name"></el-input>
				</el-col>
				<el-col :span="3" class="subTitle">
					单位地址
				</el-col>
				<el-col :span="13">
					<el-input class="info-input" v-model="unitInfo.address"></el-input>
				</el-col>
			</el-row>
			<el-row class="info-row" v-show="isEdit == false">
				<el-col :span="8" class="info-label">
					单位名称：
					<label class="text">{{unitInfo.name}}</label>
				</el-col>
				<el-col :span="13" class="info-label">
					单位地址：
					<label class="text">{{unitInfo.address}}</label>
				</el-col>
			</el-row>
			<el-row class="info-row" v-show="isEdit == true">
				<el-col :span="3" class="subTitle">
					单位类别
				</el-col>
				<el-col :span="5">
					<el-select class="info-select" v-model="unitInfo.type">
						<el-option v-for="item in $store.state.unitType" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-col>
				<el-col :span="3" class="subTitle">
					职位
				</el-col>
				<el-col :span="5">
					<el-select class="info-select" v-model="unitInfo.job">
						<el-option v-for="item in $store.state.job" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-col>
				<el-col :span="3" class="subTitle">
					月收入
				</el-col>
				<el-col :span="5">
					<el-input class="info-input" v-model="unitInfo.priceMoney">
						<template slot="append">元</template>
					</el-input>
				</el-col>
			</el-row>
			<el-row class="info-row" v-show="isEdit == false">
				<el-col :span="8" class="info-label">
					单位类别：
					<label class="text">{{unitInfo.type_name}}</label>
				</el-col>
				<el-col :span="8" class="info-label">
					职位：
					<label class="text">{{unitInfo.job_name}}</label>
				</el-col>
				<el-col :span="8" class="info-label">
					月收入：
					<label class="text">{{unitInfo.priceMoney}}元</label>
				</el-col>
			</el-row>
			<el-row class="info-row" v-show="isEdit == true">
				<el-col :span="3" class="subTitle">
					工龄
				</el-col>
				<el-col :span="5">
					<el-select class="info-select" v-model="unitInfo.seniority">
						<el-option v-for="item in $store.state.seniority" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-col>
				<el-col :span="3" class="subTitle">
					单位电话
				</el-col>
				<el-col :span="5">
					<el-input class="info-input" v-model="unitInfo.phone">
					</el-input>
				</el-col>
			</el-row>
			<el-row class="info-row" v-show="isEdit == false">
				<el-col :span="8" class="info-label">
					工龄：
					<label class="text">{{unitInfo.seniority_name}}</label>
				</el-col>
				<el-col :span="8" class="info-label">
					单位电话：
					<label class="text">{{unitInfo.phone}}</label>
				</el-col>
			</el-row>
			<el-row class="info-row" v-show="isEdit == true">
				<el-col class="subTitle" :span="3">备注</el-col>
				<el-col :span="21">
					<el-input class="info-textarea" :rows="3" type="textarea" placeholder="请输入" v-model="unitInfo.result"></el-input>
				</el-col>
			</el-row>
			<el-row class="info-row resultShrink" v-show="isEdit == false">
				<el-col class="subtitle" :span="3">备　　注</el-col>
				<el-col :span="12" class="text-height text-height-shrink" id='unitInfo'>
					{{ unitInfo.result }}
				</el-col>
				<el-col :span="3">
					<el-button class="credit-button-text" type="text" @click="$libs.changeHeight('unitInfoCarBuyCommonPerson', unitInfo)">{{ unitInfo.shrinkText}}</el-button>
				</el-col>
			</el-row>
		</div>
	</div>
</template>
<script>
export default {
	name: 'carBuyCommon',
	data() {
		return {
			isEdit: false,
			disabled: true,
			isNone: false,
			personalInfo: {
				name: '',
				identityAddress: '',
				identityCode: '',
				identityCounty: '',
				age: '',
				sex: '',
				sex_name: '',
				education: '',
				education_name: '',
				residence: '',
				phone: '',
				phoneAddress: '',
				marry: '',
				marry_name: '',
				address: ''
			},
			unitInfo: {
				name: '',
				address: '',
				type: '',
				type_name: '',
				job: '',
				job_name: '',
				priceMoney: '',
				seniority: '',
				seniority_name: '',
				phone: '',
				result: '',
				shrink: false,
				shrinkText: '展开全部'
			},
		}
	},
	watch: {
		'personalInfo.phone': function(_cur, _old) {
			console.log('to-get-phone');
			if (_cur) {
				this.$libs.getPhoneAddress(_cur, _old, this, 'personalInfo.phoneAddress');
			}
		},
		deep: true
	},
	methods: {
		getInfo(_id, _cb, _cb2) {
			this.$http.get('/order/spouseInfo/' + _id).then((data) => {
				if (data.data.success) {
					let datas = data.data.data;
					if (!datas) {
						this.isNone = true;
						if (_cb) {
							_cb();
						}
						return
					}
					let isNones = true;
					$.each(datas, (i, val) => {
						if (val) {
							isNones = false;
						}
					});
					if (isNones) {
						this.isNone = true;
						if (_cb) {
							_cb();
						}
						return;
					}
					this.personalInfo = {
						name: datas.customerName,
						identityAddress: datas.idCardAddr,
						identityCode: datas.idCard,
						identityCounty: datas.idCardLocation,
						age: datas.idCard.substring(6, 10) + '-' + datas.idCard.substring(10, 12) + '-' + datas.idCard.substring(12, 14),
						sex: this.$libs.toInt(datas.sex),
						sex_name: this.$libs.jsonGetName(this.$store.state.sex, datas.sex),
						education: this.$libs.toInt(datas.education),
						education_name: this.$libs.jsonGetName(this.$store.state.education, datas.education),
						residence: datas.census,
						phoneAddress: datas.mobilePhone != this.personalInfo.phone ? datas.mobilePhoneLocation : this.personalInfo.phoneAddress,
						phone: datas.mobilePhone,
						marry: this.$libs.toInt(datas.bemarried),
						marry_name: this.$libs.jsonGetName(this.$store.state.serviceSource, datas.bemarried),
						address: datas.residentialAddr,
						customerId: datas.customerId
					};
					this.unitInfo = {
						name: datas.orgName,
						address: datas.orgAddr,
						type: this.$libs.toInt(datas.orgType),
						type_name: this.$libs.jsonGetName(this.$store.state.unitType, datas.orgType),
						job: this.$libs.toInt(datas.job),
						job_name: this.$libs.jsonGetName(this.$store.state.job, datas.job),
						priceMoney: datas.monthIncome,
						seniority: this.$libs.toInt(datas.workAge),
						seniority_name: this.$libs.jsonGetName(this.$store.state.seniority, datas.workAge),
						phone: datas.orgTel,
						result: datas.remark,
						shrink: false,
						shrinkText: '展开全部'
					};
					console.log('get data');
					if (_cb2) {
						_cb2();
					}
				} else {
					if (_cb) {
						_cb();
					}
				}
			}).catch((error) => {

			});
		},
		infoEnter(_id, _isMust, _orderStatus, _cb) {
			if (this.personalInfo.phone && parseInt(this.personalInfo.phone).toString().length != 11) {
				this.$message.error('共同购车人手机号码格式有误！');
				if (_cb) {
					_cb();
				}
				return;
			}
			let param = {
				customerId: this.personalInfo.customerId, //客户记录编号 *
				customerName: this.personalInfo.name, //客户姓名
				idCard: this.personalInfo.identityCode, //身份证号
				idCardLocation: this.personalInfo.identityCounty, //身份证归属地  Y
				idCardAddr: this.personalInfo.identityAddress, //身份证地址 Y
				sex: this.personalInfo.sex, //性别 Y int
				census: this.personalInfo.residence, //户籍 Y
				education: this.personalInfo.education, //学历 Y
				mobilePhone: this.personalInfo.phone, //手机号码 Y
				mobilePhoneLocation: this.personalInfo.phoneAddress, //手机归属地 Y
				bemarried: this.personalInfo.marry, //婚姻状态 Y int
				residentialAddr: this.personalInfo.address, //现住地址 Y
				orgName: this.unitInfo.name, //工作单位名称 Y
				orgType: this.unitInfo.type, //单位类别 Y int
				orgAddr: this.unitInfo.address, // 单位地址 Y
				orgTel: this.unitInfo.phone, // 单位电话 Y
				job: this.unitInfo.job, // 职务 Y
				monthIncome: this.unitInfo.priceMoney, //月收入 Y double
				workAge: this.unitInfo.seniority, //工龄范围类型 Y int
				remark: this.unitInfo.result, //备注 Y
			}
			if (_isMust && !this.$libs.mustWrite(param, ['remark'])) {
				this.$store.commit('isAllMustFalse');
				if (_cb) {
					_cb();
				}
				this.$libs.noneAddHightBorder();
				return;
			} else if (_isMust) {
				// this.$store.commit('isAllMustTrue');
			}
			this.$http.post('/order/spouseInfo/' + _id, param).then((data) => {
				console.log(data);
				if (data.data.success) {
					this.id = _id;
					this.orderStatus = _orderStatus;
					this.$store.commit('saveNumAdd', this, _id);
				} else {
					this.$message.error(data.data.message);
				}
			}).catch((error) => {

			});
		}
	},
	mounted() {
		this.$store.commit('education', this);
		this.$store.commit('unitType', this);
		this.$store.commit('job', this);
		this.$store.commit('seniority', this);
	}
}

</script>
<style lang="scss" scoped>
@import '../../assets/css/site.scss';
.carBuyCommon {
	font-size: 14px;
	color: #475669;
	padding-top: 17px;
}

</style>
